<template>
	<view>
		<ni class="uni-ec-canvas" id="uni-ec-canvas" ref="uni-ec-canvas" canvas-id="uni-ec-canvas" :ec="ec" @inited="inited"></ni>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import ni from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	import * as echarts from '@/components/uni-ec-canvas/echarts.js';
	export default {
		components: {
			ni
		},
		data() {
			return {
				ec: {
					option: {
						animation: true,
						// color: ['#02ad81', '#bbe2e8', '#6cacde'],
						grid: {
							top: 15, //距离顶部15px
							bottom: '15%', //距离底部15%
							left: '15%',
							right: "1%",
							position: 'absolute'
						},
						calculable: false,

						xAxis: [{
							// type: 'category',
							interval: 5, //刻度间隔
							type: 'value',
							max: 10,
							axisLine: {
								lineStyle: {
									color: '#000'
								}
							},
							axisLabel: {
								show: true, //是否显示刻度
								color: '#000'
							},
							splitLine: { //分割线配置
								show: true,
								lineStyle: {
									color: "#000",
								}
							}
						}],
						yAxis: [{

							axisTick: {
								show: false
							},
							data: [10, 20, 30, 40, 50, 60],
							axisLine: {
								lineStyle: {
									fontZize: 11,
									fontWeight: 500,
									color: '#000',
								}
							},
							axisLabel: {
								color: '#333',
								fontZize: 12,
								fontWeight: 500,
								fontFamily: 'PingFangSC-Medium, PingFang SC',
							}
						}],
						series: [{
								type: 'bar',
								barWidth: 18,
								label: {
									normal: {
										show: false,
										// position: 'inside'
									}
								},
								data: ['腑脏', '寒热', '阴阳', '气血', '上火', '湿气'],
								itemStyle: {
									// emphasis: {
									// 	color: '#37a2da'
									// },
									normal: {
										barBorderRadius: [0, 20, 20, 0],
										color: new echarts.graphic.LinearGradient(
											0, 0, 1, 0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
											[{
													offset: 0,
													color: '#F5F2EF'
												},
												{
													offset: 1,
													color: '#FFBD4C'
												}

											] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
										)
									},
								}
							},

						]
					} //echart 配置项
				}
			};
		},
		methods: {
			inited(chart) {
				console.log('图表初始化完毕')
				console.log('chart实例', chart)
			}
		}
	}
</script>

<style lang="scss">
	.uni-ec-canvas {
		width: 100%;
		height: 550upx;
		display: block;
	}
</style>
